import React,{useState,useEffect,memo} from "react";
import './index.scss'

//**点击倒计时:60 倒计时结束前不能取消 */

let timer = null
function VerifyCode(props){
  const [time, setTime] = useState(0)

  useEffect(() =>{
    timer && clearInterval(timer)
    return () => timer && clearInterval(timer)
  },[])

  useEffect(()=>{
    console.log('倒计时')
    if(time === 0){
      clearInterval(timer)
    }
  },[time])

  const handler = () =>{
    setTime(props.time || 60)
    timer = setInterval(() => {
      setTime(time => time -1)
    },1000)
    props.onClick && props.onClick()
  }
  return(
    <button className={['verify-code', time ? 'glay' : ''].join(' ')} onClick={handler} type="button" disabled={time !== 0}>
      {time ? `${time}秒后重新获取`:"获取手机验证码"}
    </button>
  )
}
export default memo(VerifyCode) //memo包装属性 后子组件不会重新渲染